<template>
<div class="container">
    <div class="title-wrap">
        <div class="title-text">
            <img src="../../assets/img/random_icon.png" alt="" />
            <span>随机点名</span>
        </div>
        <!-- 最小最大关闭 -->
        <div class="title-btns">
            <img src="../../assets/img/mini-w.png" @click="windowMin" alt="" />
            <img src="../../assets/img/close-w.png" @click="windowClose" alt="" />
        </div>
    </div>
    <div class="num_bg_box"  v-if="isStart" >
        <div v-for="item in studentNum" :key="item">
            <div class="num_bg">
            </div>
       </div>
    </div>
    
    <div class="content">
        <div id="studentNumber">
            <div class="take-student-num align-start" style="-webkit-app-region: no-drag;" v-if="!isStart">
                <div class="setting align-around">
                    <div class="num-range flex-start">
                        <div class="tips">随机学号范围：</div>
                        <input type="text" v-model.number.trim="lowRange" maxlength="2" class="range-input"
                            placeholder="输入" v-arouse>
                        <span class="space-word">至</span>
                        <input type="text" v-model.number.trim="highRange" max="50" maxlength="2" class="range-input"
                            placeholder="输入" v-arouse>
                        <div class="tips" style="position:relative;left:80px">是否重复:</div>
                        <div class="repeat" :class="[isRepeat ? 'yes' : '']" @click="repeat">是</div>
                        <div class="repeat" :class="[!isRepeat ? 'yes' : '']" @click="norepeat">否</div>
                    </div>
                    <div class="student-num flex-start">
                        <div class="tips">随机学生数量：</div>
                        <div v-for="item in 5" :key="item" :class="['pointer', 'num',{'active':item===studentNum}]"
                            @click="studentNum = item">{{item}}</div>
                    </div>
                </div>
                <div class="pointer start" style="background: #4894FF;position:absolute;bottom:111px" @click="startTask">开始</div>
            </div>
            <div class="take-student-num align-start" style="-webkit-app-region: no-drag;" v-else>
                <div class="setting flex-center">
                    <!-- <div class="num_bg_box"  v-for="item in studentNum" :key="item">
                        <div class="num_bg">
                        </div>
                    </div> -->
                    <div v-for="item in studentNum" :key="item" class="choosed">
                        <div class="animation-student-num " ref="animationStudentNum">
                                 <div class="animation-num" ref="animation"
                                :style="fontSize ? 'font-size:75px':'font-size:100px'">{{numArry[item-1]}}</div>
                                <div class="animation-numTwo" ref="animation" v-if="!isRepeat"
                                :style="fontSize ? 'font-size:75px':'font-size:100px'">{{tempRandom[item-1]}}</div>
                                <div class="animation-numTwo" ref="animation"
                                :style="fontSize ? 'font-size:75px':'font-size:100px'">{{numArryTwo[item-1]}}</div>
                                <div class="animation-numTwo" ref="animation"
                                :style="fontSize ? 'font-size:75px':'font-size:100px'">{{copyNumArry[item-1]}}</div>
                        </div>
                    </div>
                </div>
                <div class="btn-container flex-center" style="position:absolute;bottom:111px">
                    <div class="pointer start"  v-if="!begin"
                        @click="isStart=false;over = false;deleteArr=[]">返回</div>
                    <div class="pointer again" v-if="!begin" @click="again">再来一次</div>
                </div>

            </div>
        <audio src="../../assets/sound/lotteryend.mp3" ref="audioBegin" style="opcity:0" @play="audioIsReady"></audio>
        </div>
    </div>
</div>
    
</template>

<script>
import mixin from '../../mixin/mixin'
// import homeContainer from '../../components/background'

export default {
    mixins: [mixin],
    name: "StudentNumber",
    // components: { homeContainer },
    data () {
        return {
            lowRange: 1,
            highRange: 50,
            studentNum: 3,
            isStart: false,
            begin: true,
            numArry: [],
            numArryTwo: [],
            disable: false,
            changeTime: 200,
            stop: false,
            timeOut: null,
            changeIndex: 1,
            copyNumArry: [],
            isRepeat:true,
            deleteArr:[],
            rangeArr:[],
            over:false,
            tempRandom:[],
        }
    },
    computed: {
        inputResult () {
            if (!this.lowRange && !this.highRange) {
                return '请选择抽取学号的范围'
            }
            if (typeof this.lowRange !== 'number' || typeof this.highRange !== 'number') {
                return '学号只能是数字'
            }
            if (this.lowRange <= 0 || this.highRange <= 0) {
                return '学号必须大于零'
            }
            if (this.lowRange >= this.highRange) {
                return '请按从小到大的顺序填写'
            }
            if (this.highRange - this.lowRange < this.studentNum) {
                return '选取人数不能比范围还大'
            }
            return 'success'
        },
        fontSize () {
            return this.numArry.some(v => {
                return v > 99
            })
        }
    },
    mounted () {
        let studentNumber = window.localStorage.getItem('studentNumber')
        if (studentNumber) {
            studentNumber = JSON.parse(studentNumber)
            this.highRange = studentNumber.highRange
            this.lowRange = studentNumber.lowRange
            this.studentNum = studentNumber.studentNum
        }
    },
    methods: {
        again(){
            if (this.over === true) {
                this.$message({
                    message:'当前暂无学号，请返回重新开始',
                    duration: 3000,
                    type:'warning'
                })
                console.log('剩余号码不足够抽取');
                return
            }
            this.startTask()
        },
        startTask () {
            if (this.inputResult !== 'success') {
                this.$message.warning(this.inputResult)
                return
            }
            this.isStart = true
            for (let i = 0;i < this.studentNum;i++) {
                this.$set(this.numArry, i, 0)
                this.$set(this.numArryTwo, i, 0)
                // this.numArry.push({ num: 0 })
            }
            let studentNumber = {
                lowRange: this.lowRange,
                highRange: this.highRange,
                studentNum: this.studentNum
            }
            window.localStorage.setItem('studentNumber', JSON.stringify(studentNumber))
            this.takeStudentNum()
            setTimeout(() => {
                this.stopChange()
            }, 3000);
           
        },
        takeStudentNum () {
            this.$refs.audioBegin.play()
        },
        audioIsReady () {
            console.log('audio is ready')
            this.begin = true
            this.stop = false
            this.changeNum()
        },
        changeNum () {
            if (this.stop) {
                return
            }
            if (this.disable) {
                this.changeTime = this.changeTime + 50;
                console.log(this.changeTime)
            }
            this.$refs.animationStudentNum.forEach(v => {
                v.style.animation = `infiniteRoll ${(this.changeTime) / 1000}s linear infinite`
            })
            //  this.$refs.animation = `infiniteRoll ${(this.changeTime) / 1000}s linear infinite`
            
            let tampArr = []
            for (let j = this.lowRange; j < this.highRange+1; j++) {
                tampArr.push(j)
            }
            this.rangeArr = tampArr
            if (!this.timeOut) {
                console.log(this.deleteArr);
                for (let i = 0, length = this.studentNum;i < length;i++) {
                    let random = parseInt(Math.random() * (this.highRange - this.lowRange + 1) + this.lowRange)
                    if (this.isRepeat === false) {
                        console.log(random);
                        for (var k = 0, len = this.deleteArr.length; k < len; k++) {
                            for (var j = 0, jen = this.rangeArr.length; j < jen; j++) {
                                if (this.rangeArr[j] === this.deleteArr[k]) {
                                    this.rangeArr.splice(j, 1);
                                    j--;
                                }
                            }
                        }//去除学号范围里选取过的随机数

                        this.deleteArr.forEach(item=>{
                            if (random === item) {//生成的随机数已经选取过
                                let trandom =  parseInt(Math.random() * (this.rangeArr.length)) //依据没选取过的数组的长度生成随机数
                                random = this.rangeArr[trandom]//随机数等于剩余未选取数组中的随机数
                            }
                        })
                        console.log(this.rangeArr);
                        this.deleteArr.push(random) //向选中过的数组添加随机数
                    }
                    this.$set(this.numArry, i, random)
                    this.$set(this.numArryTwo, i, random)
                } 
                if (this.rangeArr.length <  this.studentNum) {
                    this.over = true
                    this.deleteArr = []
                }
                this.copyNumArry = this.numArry
            }
            this.timeOut = setTimeout(() => {
                if (this.stop) {
                    this.numArry = this.deleteTheSameNum(this.lowRange, this.highRange, this.numArry)
                    if (this.timeOut) {
                        this.timeOut = null
                        clearTimeout(this.timeOut)
                        this.$refs.animationStudentNum.forEach(v => {
                            v.style.animation = ''
                        })
                    }
                    return
                }
                if (this.isRepeat === false) {
                   for (let i = 0, length = this.studentNum;i < length;i++) {
                        this.$set(this.tempRandom, i, parseInt(Math.random() * (this.highRange - this.lowRange + 1) + this.lowRange))
                        this.$set(this.numArryTwo, i, parseInt(Math.random() * (this.highRange - this.lowRange + 1) + this.lowRange))
                    }
                }else{
                    for (let i = 0, length = this.studentNum;i < length;i++) {
                        this.$set(this.numArry, i, parseInt(Math.random() * (this.highRange - this.lowRange + 1) + this.lowRange))
                        this.$set(this.numArryTwo, i, parseInt(Math.random() * (this.highRange - this.lowRange + 1) + this.lowRange))
                    }
                }
                
                this.changeNum();
            }, this.changeTime);
        },
        //剔除重复学号
        deleteTheSameNum (start, end, arry) {
            if (!Array.isArray(arry)) return
            let newSet = new Set(arry)
            if (newSet.size === arry.length) return arry
            while (newSet.size !== arry.length) {
                newSet.add(parseInt(Math.random() * (end - start + 1) + start))
            }
            return [...newSet]
        },
        stopChange () {
            if (this.disable) return
            this.disable = true
            this.stopAudioEnd()
            // this.$refs.audioBegin.pause()
            // this.$refs.audioEnd.play()
        },
        stopAudioEnd () {
            console.log("stop audio is true")
            this.disable = false
            this.stop = true;
            this.changeTime = 200
            this.begin = false
        },
        repeat(){
            this.isRepeat = true
        },
        norepeat(){
            this.isRepeat = false
        },


        windowMin() {
            this.$electron.ipcRenderer.send("resource-window-minimize", {
              metaId: "extractNumber",
            });
        },
        windowClose() {
            this.deleteArr = []
            this.$electron.ipcRenderer.send("close-resource-window", {
              metaId: "extractNumber",
            });
        },
    }
}
</script>

<style lang="scss">
.container {
width: 100%;
min-height: 100vh;
// background-color: #fff;
background-image: url("../../assets/img/random_body.jpg");
background-size: cover;
position: relative;
    .title-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-image: url("../../assets/img/title_bg.png");
    background-size: cover;
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 98;

    .title-text {
      display: flex;
      align-items: center;
      img {
        margin-right: 8px;
        width: 20px;
        height: 20px;
      }
      span {
        font-size: 18px;
        color: #fff;
      }
    }

    .title-btns {
      -webkit-app-region: no-drag;
      img {
        width: 14px;
        height: 14px;
        margin-left: 18px;
        cursor: pointer;
      }
    }
  }
    .num_bg_box{
        position: absolute;
        display:flex;
        top: 335px;
        width: 100%;
        height: 382px;
        z-index: 100;
        padding: 0 120px;
        justify-content: center;
        justify-items: center;
    }
    .num_bg{
        min-width: 195px;
        height: 200px;
        line-height: 200px;
        background-image: url("../../assets/img/number_bg.png");
        background-size: cover;
        margin: 0 7px;
        text-align: center;
    }
   .content{
        display: flex;
        justify-content: center;
        position: relative;
        top: 64px;
        height: 836px;
    }
    #studentNumber {
        .take-student-num {
            width: 1249px;
            height: 383px;
            margin-top: 180px;
            background-image: url(../../assets/img/random_bg.png);
            background-size: cover;
        }
        .setting {
            width: 1249px;
            height: 382px;
            border-radius: 10px;
            position: relative;
            // left: -50px;
            padding: 0 110px;
            .tips {
                font-size: 32px;
                color: #303133;
            }
            .num-range {
                width: 100%;
            }
            .range-input {
                width: 113px;
                height: 70px;
                background: #FFFFFF;
                border-radius: 15px;
                line-height: 88px;
                text-align: center;
                outline: none;
                border: none;
                color: #303133;
                font-size: 32px;
                &::placeholder {
                    font-size: 32px;
                    color: #909399;
                }
            }
            .space-word {
                font-size: 32px;
                color: #606266;
                margin: 0 40px;
            }
            .student-num {
                width: 100%;
            }
            .repeat{
                width: 74px;
                height: 74px;
                line-height: 74px;
                text-align: center;
                background: #fff;
                border-radius: 44px;
                color: #606266;
                margin-left: 30px;
                font-size: 32px;
                cursor: pointer;
                position: relative;
                left:80px
            }
            .yes{
                background: #4894ff;
                color: #fff;
            }
            .num {
                width: 74px;
                height: 74px;
                line-height: 74px;
                text-align: center;
                background: #fff;
                border-radius: 44px;
                color: #606266;
                font-size: 32px;
                &:not(:last-child) {
                    margin-right: 28px;
                }
            }
            .active {
                background: #4894ff;
                color: #fff;
            }
        }
        .start {
            width: 330px;
            height: 80px;
            background: #F4A323;
            border-radius: 40px;
            margin-right:40px;
            line-height: 78px;
            text-align: center;
            font-size: 32px;
            color: #fff;
            margin-top: 42px;
        }
        .again{
            width: 330px;
            height: 80px;
            background: #4894FF;
            border-radius: 40px;
            line-height: 78px;
            text-align: center;
            font-size: 32px;
            color: #fff;
            margin-top: 42px;
        }
        // .num_bg_box{
        //     // position: absolute;
        //     display:flex;
        //     top: 200px;
        //     width: auto;
        //     background-color: greenyellow;
        //     z-index: 10000;
        // }
        // .num_bg{
        //     min-width: 195px;
        //     height: 200px;
        //     line-height: 200px;
        //     background-image: url("../../assets/img/number_bg.png");
        //     background-size: cover;
        //     margin: 0 12px;
        //     border: 1px solid red;
        //     text-align: center;
        // }
        .choosed {
            // clear: both;
            min-width: 178px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            // border: 1px solid greenyellow;
            // background: rgba(242, 248, 252, 1);
            // box-shadow: 0px 0px 7px 0px rgba(94, 171, 255, 0.2);
            border-radius: 12px;
            color: #303133;
            overflow: hidden;
            margin: 0 15px;
            z-index: 10000;
        }
        .animation-student-num {
        }
        .animation-num {
            height: 150px;
            line-height: 120px;
            text-align: center;
            margin-top: 25px;
            padding-bottom: 25px;
            // border: 1px solid red;
            
           
            // animation: rotate3d 0.2s ease infinite;
            // perspective: 1000px;
            // animation: rotate3d 0.3s ease-in-out infinite;
        }
        .animation-numTwo {
            height: 150px;
            line-height: 150px;
            margin-top: 25px;
            padding-bottom: 25px;
            text-align: center;
            // animation: rotate3d2 0.2s ease infinite;
        }
        @keyframes infiniteRoll {
            
            0% {
                transform: translateY(0);
            }
            100% {
                // transform: rotateY(360deg);
                transform: translateY(-300px);
            }
        }
    }
}
</style>
